
import React, { useState, useEffect } from 'react'
import { useHistory } from 'react-router-dom'
import { Layout, Menu, Row, Col, Progress, InputNumber, Button, Spin } from 'antd';
import { SnippetsOutlined } from '@ant-design/icons'
import { imgUrl } from '@/config/envconfig'
import HeaderBox from '@/components/header'
import FooterBox from '@/components/footer'
import feeIcon from '../../assets/img/icon/fee.png'
import cardIcon from '../../assets/img/icon/card.png'
import soldIcon from '../../assets/img/sold.png'
import feeIcon1 from '../../assets/img/fee/1.png'
import feeIcon2 from '../../assets/img/fee/2.png'
import feeIcon3 from '../../assets/img/fee/3.png'
import feeIcon4 from '../../assets/img/fee/4.png'
import Funs from '@/utils/Funs'
import API from '@/api/api'
import './index.scss'
const { Content } = Layout

function Power(props) {
    const feeDescList = [
        { icon: feeIcon1, title: '币收益提至206%', desc: '电费不再扣币，可获得更多的数字货币' },
        { icon: feeIcon2, title: '电费更低', desc: '2%的充值特惠,成本更低,收益更高' },
        { icon: feeIcon3, title: '持续收益', desc: '自费电费囤币' },
        { icon: feeIcon4, title: '立即生效', desc: '购买即生效，收益立即提升' },
    ]
    const [load, setLoad] = useState(true)
    const [isPhone, setIsPhone] = useState(false)
    const [coinList, setCoinList] = useState([])
    const [powerList, setPowerList] = useState([])
    const [num, setNum] = useState()
    const [payList, setPayList] = useState([])
    const [feeList, setFeeList] = useState()
    const [feeIndex, setFeeIndex] = useState(0)
    const [menuIndex, setMenuIndex] = useState('all')

    let history = useHistory()

    useEffect(() => {
        if (Funs.getUrl('type')) {
            let type = Funs.getUrl('type')
            setMenuIndex(type)
        }
        isMobile()
        getGoodsCategory()
        getPayList()
    }, [])

    const isMobile = () => {
        if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
            setIsPhone(false)
        } else {
            setIsPhone(true)
        }
    }

    const getGoodsCategory = async () => {
        let res = await API.goodsCategory()
        if (res) {
            let data = categoryDeal(res.data)
            setCoinList(data)
            getGoods()
        }
    }

    const getGoods = async () => {
        let res = await API.goodsList()
        if (res && res.data) {
            setPowerList(goodDeal(res.data))
            setFeeList(feeDeal(res.data))
            setLoad(false)
        } else {
            setLoad(false)
        }
    }

    const getPayList = async () => {
        let res = await API.payList()
        if (res) {
            setPayList(payDeal(res.data))
        }
    }

    const payDeal = (data) => {
        if (data) {
            let tempArr = []
            data.map((v, i) => {
                if (v.is_mobile && isPhone) {
                    tempArr.push(v)
                } else if (v.is_pc && !isPhone) {
                    tempArr.push(v)
                }
                return v
            })
            return tempArr
        }
    }

    const categoryDeal = (data) => {
        if (data) {
            let tempArrr = []
            data.map((v, i) => {
                if (v.parent_id === 1) {
                    tempArrr.push(v)
                }
                return v
            })
            return tempArrr
        }
    }

    const goodDeal = (data) => {
        if (data) {
            let tempArrr = []
            data.map((v, i) => {
                if (v.miner_coin_name && v.total === 1) {
                    tempArrr.push(v)
                }
                return v

            })
            return tempArrr
        }
    }

    const feeDeal = (data) => {
        if (data) {
            let tempArrr = []
            data.map((v, i) => {
                if (!v.miner_daily_unit_managed_price) {
                    tempArrr.push(v)
                }
                return v

            })
            console.log(tempArrr)
            return tempArrr
        }
    }

    const selectMenu = id => {
        setMenuIndex(String(id))
        history.push(`/power?type=${id}`)
    }

    const selectAll = () => {
        history.push(`/power`)
    }

    const coinItem = (value, index) => {
        return (
            <Menu.Item className="power-menu-item" key={value.name} onClick={() => selectMenu(value.name)}>
                <img src={imgUrl + value.logo} alt={value.name} /> { value.name}
            </Menu.Item>
        )
    }

    const selectPower = id => {
        history.push(`/powerDetail/${id}${num ? 'num=' + num : ''}`)
    }

    const buyFee = () => {
        history.push(`/feeDetail/${feeIndex}`)
    }

    const powrItem = (value, index) => {
        let show = false
        if (menuIndex === 'all' || menuIndex === value.category.name) {
            show = true
            return (
                <Col key={index} md={7} sm={10} xs={20}>
                    <div className="power-item" >
                        <h3>{value.name}</h3>
                        <Row className="title" justify="space-between" align="middle">
                            <Col className="icon-logo"><img src={imgUrl + value.category.logo} alt="btc" /> <span>{value.category.name}</span></Col>
                            <Col><big>{value.cycle_days}天</big> 套餐</Col>
                        </Row>
                        <Row justify="center">
                            <small>电费单价 / {value.unit}S / 天</small>
                        </Row>
                        <Row justify="center" className="price">
                            $ <big>{Funs.toNum(value.miner_daily_unit_power_price, 2)}</big>
                        </Row>
                        <Row justify="space-between" className="desc">
                            <Col>
                                <p className="title">合约周期</p>
                                <p>{value.cycle_days}天</p>
                            </Col>
                            <Col>
                                <p className="title">管理费用</p>
                                <p>$ {value.miner_daily_unit_managed_price.total}</p>
                            </Col>
                            <Col>
                                <p className="title">交付日期</p>
                                <p>{value.delivery_days === 0 ? '立即交付' : value.delivery_days + '天'}</p>
                            </Col>
                        </Row>
                        <Row justify="space-between">
                            <Col span={17}>
                                <Progress percent={value.percent} showInfo={false} strokeColor="#F8B657" strokeLinecap="square" />
                            </Col>
                            <Col className="text-right">
                                <small> 已售：{value.sold / value.available}%</small>
                            </Col>
                        </Row>
                        <Row className="input-row">
                            <InputNumber className="input-num" value={num} min={1} maxLength={14} onChange={e => setNum(e)} />
                            <span className="input-sub">{value.unit}S</span>
                        </Row>

                        {
                            value.percent === 100 ?
                                <Row>
                                    <Button className="look-btn" >查看详情</Button>
                                </Row>
                                :
                                <Row>
                                    <Button className="buy-btn" type="primary" onClick={() => selectPower(value.id)}>
                                        立即购买 | $ {num ? Funs.Mul(value.miner_daily_unit_power_price, num) : 0}</Button>
                                </Row>
                        }

                        <Row className="award" justify="center">
                            <span>静态收益率：{value.chart.price.incomeRate * 100}%</span>
                        </Row>
                        <Row>
                            <Col span={5}>
                                <small> 支付方式:</small>
                            </Col>
                            <Col>
                                {
                                    payList.map((v, i) => {
                                        return <img className="pay-icon" key={i} src={imgUrl + v.image} />
                                    })
                                }
                            </Col>
                        </Row>

                        {value.percent === 100 && <div className="sold"><img src={soldIcon} /></div>}
                    </div>
                </Col>
            )
        }
        if (!show) {
            return (<div className="no-data"><span>暂无套餐</span></div>)
        }
    }


    const feeDescItem = (value, index) => {
        return (
            <Col className="fee-desc-item" lg={12} key={index}>
                <Row>
                    <Col>
                        <img src={value.icon} />
                    </Col>
                    <Col align="left" justify="space-around">
                        <p>{value.desc}</p>
                        <big>{value.title}</big>
                    </Col>
                </Row>
            </Col>
        )
    }

    const feeItem = (value, index) => {
        return (
            <Row className={feeIndex === index ? "fee-item-active" : "fee-item"}
                key={index}
                onClick={() => setFeeIndex(index)}>
                <Col>${value.price} 电费包</Col>
                <div className="fee-sub">赠送{Funs.Mul(Funs.Sub(Funs.Div(value.total, value.total_before), 1), 100)}%</div>
            </Row>
        )
    }

    return (
        <Layout className="layout power">
            <HeaderBox />
            <Content>
                <Menu className="power-menu" mode="horizontal" selectedKeys={[menuIndex]}>
                    <Menu.Item className="power-menu-item" key={'all'} onClick={() => selectMenu('all')}>
                        全部产品
                    </Menu.Item>
                    {
                        coinList.map((value, index) => {
                            return coinItem(value, index)
                        })
                    }
                    <Menu.Item className="power-menu-item" key={'fee'} onClick={() => selectMenu('fee')}>
                        <img src={feeIcon} alt="fee" /> 电费包
                    </Menu.Item>
                </Menu>
                {
                    load ? <div className="load-box"><Spin size="large" /></div> :
                        menuIndex !== 'fee' ?
                            <section>
                                <Row className="power-list main" justify="space-around">
                                    {
                                        powerList.map((value, index) => {
                                            return powrItem(value, index)
                                        })
                                    }
                                </Row>
                                {powerList.length === 0 ? <Row className="no-data" justify="center" align="middle"><SnippetsOutlined /> 暂无套餐</Row> : null}
                            </section> :
                            <section>
                                <Row className="power-fee main" justify="space-between">
                                    <Col>
                                        <Row align="middle" className="fee-one">
                                            <img className="fee-icon" src={feeIcon} /> <big>电费包</big> 支付方式：
                                        {
                                                payList.map((v, i) => {
                                                    return <img className="pay-icon" key={i} src={imgUrl + v.image} />
                                                })
                                            }
                                        </Row>
                                        <Row>充值电费，获取更高挖矿收益</Row>
                                    </Col>
                                    <Col>
                                        <Row justify="end" className="right-big fee-one">电费包</Row>
                                        <Row justify="end gray-text">最高可以获得10%充值赠送，更</Row>
                                        <Row justify="end gray-text">低电费，更高收益 | <a> 如何使用</a></Row>
                                    </Col>
                                </Row>
                                <Row className="fee-box main">
                                    <Col lg={18}>
                                        <Row className="fee-desc">
                                            {
                                                feeDescList.map((value, index) => {
                                                    return feeDescItem(value, index)
                                                })
                                            }
                                        </Row>
                                    </Col>
                                    <Col className="fee-list" lg={6}>
                                        {
                                            feeList.map((value, index) => {
                                                return feeItem(value, index)
                                            })
                                        }
                                        <Button className="fee-item-btn" type="primary" onClick={buyFee}>
                                            立即购买</Button>
                                    </Col>
                                </Row>
                            </section>
                }
            </Content>
            <FooterBox />
        </Layout >
    )
}

export default Power